//colors
$black_20: rgba(0, 0, 0, .2);
$black_10: rgba(0, 0, 0, .1);
$black_666: #666;
$black_999: #999;
$bar_bg: lightgrey;
$bar_played: yellowgreen;
$volume_width: 20px;
$time_width: 85px;
$player-width: 395px;
$player-height: 100px;
$bottom-bar-height: 20px;

* {
  margin: 0;
  padding: 0;
}

.player {
  margin: 10px auto;
  padding: 10px;
  width: $player-width;
  box-shadow: 0 2px 10px 0 $black_20;
  border-radius: 5px;
}

.player-cover {
  float: left;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
  animation: rotate 12s linear infinite;
  animation-play-state: paused;

  img {
    width: 100%;
  }
}

.player-main {
  height: 100px;
  margin-left: 110px;
  position: relative;

  .player-info {

    .player-title {
      font-size: 14px;
      color: $black_666;
    }

    .player-author {
      font-size: 12px;
      color: $black_999;
    }

    .player-loading {
      font-size: 12px;
      color: $black_999;
      &.error {
        color: pink;
      }
    }
  }
  .player-controller {
    //display: flex;
    //justify-content: flex-start;
    //align-items: center;
    padding-top: 10px;
    .player-toggle {

    }
    .player-lrc {
      font-size: 12px;
      color: $black_999;
      margin: 0 5px;
      overflow: hidden;
      vertical-align: top;
    }
    .player-spectrum {
      margin-left: 15px;
    }
  }

  .player-bottom-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: $bottom-bar-height;

    .time-bar {
      margin-right: $volume_width + $time_width;
      height: $bottom-bar-height;

      .total-time-bar {
        width: 100%;
        height: 3px;
        background-color: $bar_bg;
        cursor: pointer;
        /*垂直居中,设置成absolute则margin无效*/
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }

      .played-time-bar {
        position: absolute;
        height: 3px;
        width: 1%;
        background-color: $bar_played;
        cursor: pointer;
      }
    }

    .time-text {
      text-align: right;
      position: absolute;
      right: $volume_width;
      bottom: 0;
      width: $time_width;
      height: $bottom-bar-height;
      line-height: $bottom-bar-height;
      font-size: 12px;
      color: $black_666;
    }

    .player-volume-icon {
      position: absolute;
      right: 0;
      bottom: 0;
      line-height: $bottom-bar-height;
      font-size: 0.5em;
      color: $black_666;
      &:hover ~ .player-volume-bar {
        display: block;
      }
    }
    .player-volume-bar {
      display: none;
      position: absolute;
      right: 0;
      bottom: 20px;
      width: 15px;
      height: $player-height - $bottom-bar-height;
      transition: .3s cubic-bezier(0.5, 0, 0.2, 1);
      cursor: pointer;

      .total-volume-bar {
        margin: 0 auto;
        width: 5px;
        height: 100%;
        background-color: $bar_bg;
      }

      .current-volume-bar {
        margin: 0 auto;
        width: 5px;
        position: absolute;
        bottom: 0;
        height: 100%;
        background-color: #59d8cf;
      }

      &:hover {
        display: block;
      }
    }
  }
}

.player-list {
  font-size: 12px;
  max-height: 120px;
  overflow: auto;
  color: $black_999;
  .music-item {
    position: relative;
    margin: 5px 0 5px 20px;
    cursor: pointer;
    .music-author {
      position: absolute;
      right: 0;
      cursor: auto;
    }
    &:first-child {
      margin-top: 20px;
    }
    &.active {
      color: #59d8cf;
    }
  }
  &::-webkit-scrollbar {
    display: none
  }
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg)
  }
  to {
    -webkit-transform: rotate(360deg)
  }
}

